<template>
    <div class="right-side" :style="{ width: divWidth + 'px' }">
        <div class="resize" @mousedown="startDrag">
            <div class="icon">
                <el-icon :size="25" color="#ffffff">
                    <MoreFilled />
                </el-icon>
            </div>
        </div>
        <div v-show="type == 'archive'">
            <Archive />
        </div>
        <div v-show="type=='workOrder'">
            <WorkOrder />
        </div>
    </div>
</template>
<script setup lang="ts">
import {
    TUIStore,
    StoreName,
    IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import { ref, } from '../../adapter-vue';
import { useSidebarStore } from '@/store/sidebar';
import { useMulitpleSelectStore } from '@/store/mulitpleSelect';
import Archive from './archive/index.vue'
import WorkOrder from './workOrder';

const sidebarStore = useSidebarStore();
const mulitpleSelectStore = useMulitpleSelectStore();

const type = ref('');

const divWidth = ref(500);
const minWidth = 400;
const maxWidth = 600;
let startX = 0;
let startWidth = 0;

sidebarStore.$subscribe((mutate, state) => {
    type.value = state.type;
})
mulitpleSelectStore.$subscribe((mutate, state) => {
    // type.value = state.type;
})

const startDrag = (event: MouseEvent) => {
    startX = event.clientX;
    startWidth = divWidth.value;
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
};

const onDrag = (event: MouseEvent) => {
    let newWidth = startWidth - event.clientX + startX;
    newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
    divWidth.value = newWidth;
};

const stopDrag = () => {
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
}

</script>

<style lang="scss" scoped>
        .right-side {
            width: 400px;
            border-left: solid 1px #eee;
            position: relative;
    
            .resize {
                cursor: w-resize;
                position: absolute;
                top: 45%;
                left: -5px;
                background-color: #d6d6d6;
                border-radius: 5px;
                margin-top: -10px;
                width: 10px;
                height: 50px;
                background-size: cover;
                background-position: center;
                font-size: 32px;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
    
                .icon {
                    transform: rotate(90deg);
                }
            }
        }
</style>